<template>
  <div ref='container' class="container">
    <div>
      <!-- hotcity -->
      <div class="hot">
        <div class="hot-title">热门城市</div>
        <ul class="hot-list">
          <li class="hot-item" v-for="item in hotCities" @click="changeCityName(item.name)">{{item.name}}</li>
        </ul>
      </div>
      <!-- sort -->
      <div class="sort">
        <div class="sort-title">字母排序</div>
        <ul class="sort-list">
          <li class="sort-item" v-for="(val,key) in cities" @click="changeSort(key)">{{key}}</li>
        </ul>
      </div>
      <!-- list -->
      <div class="list">
        <div v-for="(val,key) in cities">
          <div class="list-title">{{key}}</div>
          <ul class="list-list">
            <li class="list-item" v-for="item in val">{{item.name}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script scope>
  import BScroll from 'better-scroll'
  export default {
    props: ['cities', 'hotCities'],

    data(){
      return{
        scroll:''
      }
    },
    methods:{
      changeSort(sortName){

      },
      changeCityName(cityName){
        console.log(cityName)
      }
    },
    mounted(){
      console.log('--------')
      console.log(this.$refs['container'])
      let container=this.$refs['container']
      this.scroll=new BScroll(container)
    }
  }
</script>

<style scope>
  .container{
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    bottom: 0;
    top: .88rem;
    background-color: #f5f5f5;

  }
  /* hotcity */
  .hot-title{
    font-size: .26rem;
    color: #212121;
    padding: .3rem;
  }
  .hot-list{
    background-color: #fff;
    font-size: .28rem;
    position: relative;
    overflow: hidden;

  }
  .hot-list:before{
    content: " ";
    position: absolute;
    height: 100%;
    width: 33.33333%;
    left: 33.33333%;
    border-left: .02rem solid #ddd;
    border-right: .02rem solid #ddd;

  }
  .hot-item{
    position: relative;
    width: 33.3333%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    float: left;
    border-bottom: .02rem solid #ddd;
   }
  /* sort */
  .sort-title{
    font-size: .26rem;
    color: #212121;
    padding: .3rem;
  }
  .sort-list{
    background-color: #fff;
    font-size: .28rem;
    position: relative;
    overflow: hidden;

  }
  .sort-item{
    width: 16.6666%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    float: left;
    color: #040404;
  }
  /* list */
  .list-title {
    font-size: .26rem;
    color: #212121;
    padding: .2rem;
  }

  .list-list {
    background-color: #fff;
    font-size: .28rem;
    position: relative;
    overflow: hidden;

  }

  .list-item {
    width: 16.6666%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    float: left;
    color: #040404;
  }
</style>
